<!-- 层叠柱状图 -->
<style type="text/css" scoped>
  .floatr {
    float: right
  }

  .martop {
    margin-top: 5%;
  }

  .line {
    width: 100%;
    height: 100%;
  }

  .attc_tu {
    width: 100%;
    height: 500px;
    background: url('../../assets/bg.jpg') no-repeat;
    background-size: 100% 100%;
  }

  .main {
    width: 100%;
    height: calc(100% - 30px);
    margin-top: -15px;
  }

  .el-row {
    margin-bottom: 20px;
  &:last-child {
     margin-bottom: 0;
   }
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    /*background: #d3dce6;*/
  }

  .bg-purple-light {
    /*background: #e5e9f2;*/
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  .res_title {
    width: 100%;
    height: 30px;
    background: #B3C0D1;
    border-radius: 15px 15px 0px 0px
  }

  .res_title span {
    display: block;
    line-height: 30px;
    padding-left: 30px;
    font-size: 15px;
    font-weight: bold;
  }

  .headeluser {
    width: 100%;
    border-bottom: 1px solid #efefef;
    border-left: 1px solid#efefef;
    border-right: 1px solid #efefef;
    background: #efefef;
  }

  .autitle {
    font-size: 25px;
    font-weight: bold;
  }

  .monuser {
    font-size: 15px;
    font-weight: bold;
  }

  ul {
    margin: auto;
    padding: 0;
    list-style: none;
    height: 110px;
    width: 70%;
    /*border: 1px solid gray*/
  }

  ul li {
    height: 55px;
    line-height: 55px;
    text-align: center;
  }

  .body_ang {
    width: 100%;
  }

  .mainmoney {
    width: 100%;
    height: calc(100% - 30px);
    margin-top: -15px;
  }

  .user_auth {
    width: 100px;
    height: 100%;
    float: left;
  }

  .margintop {
    margin-top: 30px;
  }

  .over_a:hover {
    background: #4eb0c6;
    transition: all 2s;
  }

  .over_a {
    transition: all .3s;
  }
</style>
<template>
  <div class="line">
    <div class="body_ang">
      <div class="res_title">
        <span class="user_auth"> 分红汇总 </span>
      </div>
      <div class="headeluser">
        <el-row>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <ul>
                <li class="autitle">
                  当年分红金额
                </li>
                <li class="monuser animated wobble">
                  ￥{{sums.year.sum}}
                </li>
              </ul>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple-light">
              <ul>
                <li class="autitle">
                  当月分红金额
                </li>
                <li class="monuser animated swing">
                  ￥{{sums.month.sum}}
                </li>
              </ul>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <ul>
                <li class="autitle">
                  今日新增分红金额
                </li>
                <li class="monuser  animated tada">
                  ￥{{sums.Today.sum}}
                </li>
              </ul>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="res_title martop">
        <span class="user_auth"> 订单汇总</span>
      </div>
      <div class="headeluser">
        <el-row>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <ul>
                <li class="autitle">
                  当年订单金额
                </li>
                <li class="monuser animated swing">
                  ￥{{sumOrder.year.sum}}
                </li>
              </ul>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple-light">
              <ul>
                <li class="autitle">
                  当月订单金额
                </li>
                <li class="monuser  animated tada">
                  ￥{{sumOrder.month.sum}}
                </li>
              </ul>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <ul>
                <li class="autitle">
                  今日新近订单金额
                </li>
                <li class="monuser  animated tada">
                  ￥{{sumOrder.Today.sum}}
                </li>
              </ul>
            </div>
          </el-col>
        </el-row>
      </div>
      <!--<div class="res_title martop">-->
        <!--<span class="user_auth"> 当日交易量</span>-->
      <!--</div>-->
      <!--<div class="headeluser">-->
      <!--</div>-->
    </div>

  </div>
</template>
<script>
  export default {
    data() {
      return {
//        color: this.$store.state.a.color,
        totaluser: 0, //总人数
        Samemonthuser: 0, //当月人数
        Newlyaddeduser: 0, //新增人数
        /***************************  资金  **********************************/
        totalusermoney: 0, //总充值金额
        Samemonthusermoney: 0, //当充值金额
        Newlyaddedusermoney: 0, //新增充值金额
        usernuber: [],
        todaygoods: 0, //今日新近订单
        sums:{},
        sumOrder:{}
      }
    },
    methods: {

      viewallsellbuydate() {
        var date_ = new Date();
        var year = date_.getFullYear();
        var month = this.Appendzero(date_.getMonth()+1);
        var Today = date_.getFullYear() + '-' + month + '-' + this.Appendzero(date_.getDate());  //日
        this.$set(this.sums,'year',{
          "type":
            {"year": year}
        });
        this.$set(this.sums,'Today',{
          "year": year,
          "type": {
            "month": month,
            'date': Today
          }
          });
        this.$set(this.sums,'month',{
          "year": year,
          "type": {"month": month}
        });
        this.sumOrder = this.sums;
        this.buydate();
        this.buydateorder();
      },

      buydate() {
          for (let i in this.sums){
            this.http.post({
              'api': 'sumprofit',
              'data': {
                "data": this.sums[i]
              },
            }).then((res) => {
                this.$set(this.sums[i],'sum',res.data)
            }, (err) => {
              this.$h.Ed(err, this);
            })
          }
      },
      buydateorder() {
        for (let i in this.sumOrder){
          this.http.post({
            'api': 'sumprofit',
            'data': {
              "data": this.sumOrder[i]
            },
          }).then((res) => {
            this.$set(this.sumOrder[i],'sum',res.data)
          }, (err) => {
            this.$h.Ed(err, this);
          })
        }

      },
      Appendzero(obj) { //  日期 不够两位数 就在前面加一个0
        if (obj < 10) return "0" + "" + obj;
        else return obj;
      },
      alluser() {

      },
      viewgoods() { //今日新近订单

      },
      shuju() {

      },
      //用户人数
      usernumber() {

      },



      Appendzero(obj) { //  日期 不够两位数 就在前面加一个0
        if (obj < 10) return "0" + "" + obj;
        else return obj;
      },

      timeadd() {


      },
      moneychuli(date) {

      },
    },
    components: {

    },
    watch:{
//        sums(r,i){
//
//        }
    },
    mounted() {
this.viewallsellbuydate()


    }
  }
</script>
